<template>
  <div class="relative p-4" ref="board" id="board">
    <BorderBox7 :color="['white', 'white']" :key="width">
      <div class="h-full w-full" ref="panel"></div>
      <!-- 左上角框 -->
      <div class="border border-white w-60 h-32 top-8 left-8 absolute p-4">
        <p class="mb-2">链路利用率（链路表示）</p>
        <div class="flex items-center justify-between">
          <span class="bg-green-500 rounded-full aspect-square w-4"></span> &lt;
          50 %
        </div>
        <div class="flex items-center justify-between">
          <div class="bg-yellow-500 rounded-full aspect-square w-4"></div>
          50~80 %
        </div>
        <div class="flex items-center justify-between">
          <div class="bg-red-500 rounded-full aspect-square w-4"></div>
          &gt; 80 %
        </div>
      </div>
      <!-- 框 -->
      <div class="border border-white w-60 h-32 top-8 left-[276px] absolute p-4">
        <p class="mb-2">微突发次数（圆点表示）</p>
        <div class="flex items-center justify-between">
          <span class="bg-green-500 rounded-full aspect-square w-4"></span> &lt;
          100 次
        </div>
        <div class="flex items-center justify-between">
          <div class="bg-yellow-500 rounded-full aspect-square w-4"></div>
          100~500 次
        </div>
        <div class="flex items-center justify-between">
          <div class="bg-red-500 rounded-full aspect-square w-4"></div>
          &gt; 500 次
        </div>
      </div>
    </BorderBox7>

    <!-- 黑框框 -->
    <Terminal v-if="isTerminal" v-model="isTerminal"
      class="absolute -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2 w-1/2 h-2/5" />
    <!-- S1黑框框 -->
    <SwitchBox v-if="isClickS1" v-model="isClickS1"
      class="absolute -translate-x-1/2 -translate-y-1/2 top-[35%] left-[40%] w-1/5 h-1/5 text-sm font-bold" />
  </div>
</template>

<script setup>
import { Network } from "vis-network";
import { nextTick, onMounted, ref, watch } from "vue";
import { useRouter } from "vue-router";
import switchImageUrl from "../assets/Switch.png";
import clientImageUrl from "../assets/Laptop1.png";
import { BorderBox7 } from "@kjgl77/datav-vue3";
import { useElementSize } from "@vueuse/core";
import { useGlobalState } from "@/store";
import Terminal from '@/components/Terminal.vue'
import { cloneDeep, merge } from "lodash-es";
import SwitchBox from "@/components/SwitchBox.vue";

const board = ref();
const { width } = useElementSize(board);
const panel = ref();
const { isEase, isBurst } = useGlobalState();
const isTerminal = ref(false)
const isClickS1 = ref(false)
const options = {
  nodes: {
    font: {
      color: "#fff",
    },
    color: "#fff",
  },
  edges: {
    color: "rgba(255,255,255,0.2)",
  },
  layout: {
    hierarchical: {
      direction: "UD",
    },
  },
};
const nodes = [
  {
    id: 1,
    label: "pc1",
    level: 2,
    image: clientImageUrl,
    shape: "image",
  },
  {
    id: 2,
    label: "pc2",
    level: 2,
    image: clientImageUrl,
    shape: "image",
  },
  {
    id: 3,
    label: "S1",
    level: 1,
    image: switchImageUrl,
    shape: "image",
  },
  {
    id: 4,
    label: "S2",
    level: 0,
    image: switchImageUrl,
    shape: "image",
  },
  {
    id: 5,
    label: "S3",
    level: 0,
    image: switchImageUrl,
    shape: "image",
  },
  {
    id: 6,
    label: "S4",
    level: 1,
    image: switchImageUrl,
    shape: "image",
  },
  {
    id: 7,
    label: "pc3",
    level: 2,
    image: clientImageUrl,
    shape: "image",
  },
  {
    id: 8,
    label: "pc4",
    level: 2,
    image: clientImageUrl,
    shape: "image",
  },
];
function createDot(hexColor) {
  return {
    enabled: true,
    type: "image",
    imageWidth: 12,
    imageHeight: 12,
    src: `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' style='width:24px;height:24px' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10' fill='%23${hexColor.slice(
      1
    )}' /%3E%3C/svg%3E`,
  };
}

const router = useRouter();
function renderNets() {
  function changeEdgeColor(edge, color) {
    if (color === 'yellow') {
      edge.color = '#EAB308'
    };
    if (color === 'red') {
      edge.color = '#ff0000'
    };
    if (color === 'green') {
      edge.color = '#00ff00'
    };
  }
  function changeEdgeDot(edge, color) {
    if (color === 'yellow') {
      edge.arrows = {
        to: createDot("#EAB308"), from: createDot("#EAB308")
      }
    };
    if (color === 'red') {
      edge.arrows = {
        to: createDot("#ff0000"), from: createDot("#ff0000")
      }
    };
    if (color === 'green') {
      edge.arrows = {
        to: createDot("#00ff00"), from: createDot("#00ff00")
      }
    };
  }
  const baseEdge = {}
  changeEdgeDot(baseEdge, 'green')
  changeEdgeColor(baseEdge, 'green')
  const baseEdges = [
    merge({ from: 1, to: 3 }, baseEdge),
    merge({ from: 2, to: 3 }, baseEdge),
    merge({ from: 3, to: 4 }, baseEdge),
    merge({ from: 3, to: 5 }, baseEdge),
    merge({ from: 3, to: 6 }, baseEdge),
    merge({ from: 4, to: 6 }, baseEdge),
    merge({ from: 5, to: 6 }, baseEdge),
    merge({ from: 6, to: 7 }, baseEdge),
    merge({ from: 6, to: 8 }, baseEdge),
  ]
  function createEdges() {
    const edges = cloneDeep(baseEdges)
    if (isBurst.value) {
      changeEdgeDot(edges[0], 'yellow')//pc1 s1
      changeEdgeColor(edges[0], 'red')//pc1 s1
      changeEdgeDot(edges[1], 'green')
      changeEdgeColor(edges[1], 'red')
      changeEdgeDot(edges[2], 'red')//s1 s2
      changeEdgeColor(edges[2], 'red')//s1 s2
      changeEdgeDot(edges[4], 'yellow')
      changeEdgeColor(edges[4], 'yellow')
      changeEdgeDot(edges[5], 'red')//s2 s4
      changeEdgeColor(edges[5], 'red')//s2 s4
      changeEdgeDot(edges[7], 'yellow') //s4 pc3
      changeEdgeColor(edges[7], 'red') //s4 pc3
      changeEdgeDot(edges[8], 'green')
      changeEdgeColor(edges[8], 'red')
    }
    if (isBurst.value && isEase.value) {
      changeEdgeDot(edges[2], 'yellow')//s1 s2
      changeEdgeDot(edges[5], 'yellow')//s2 s4
    }
    if (isClickS1.value) {
      changeEdgeDot(edges[2], 'red') //s1 s2
      changeEdgeDot(edges[4], 'yellow') //s1 s4
      changeEdgeColor(edges[2], 'red') //s1 s2
      changeEdgeColor(edges[4], 'yellow') //s1 s4
      changeEdgeColor(edges[3], 'green') //s1 s3
    }
    if (isClickS1.value && isEase.value) {
      changeEdgeDot(edges[2], 'yellow') //s1 s2
      changeEdgeColor(edges[2], 'yellow') //s1 s2
    }
    return edges
  }
  const edges = createEdges();
  const net = new Network(panel.value, { nodes, edges }, options)
  function getLabel(id) {
    return nodes.find((v) => v.id === id).label
  }
  net.on(
    "doubleClick",
    function (params) {
      const label = getLabel(params.nodes[0]);
      if (label.startsWith("S")) router.push(`/flow?label=${label}`);
      // alert(JSON.stringify(params, null, 4))
    }
  );
  net.on("click", (params) => {
    const label = getLabel(params.nodes[0]);
    if (label === 'pc1') {
      isTerminal.value = true
    }
    if (label === 'S1') {
      isClickS1.value = true
    }
  })
}

onMounted(() => {
  renderNets();
});

watch([width, isBurst, isClickS1], () => {
  nextTick(() => renderNets());
});
</script>
